!<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>镜像管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
          <div class="content-box">
             <div class="search-box">
                <div class="search-item">
                    <span class="search-title">镜像名称: </span>
                    <el-input v-model="imageValue" placeholder="请输入镜像名称" style="float:left; width:auto;"></el-input>
                </div>
                <div class="search-item">
                    <el-button type="primary" @click="searchFn">搜索</el-button>
                </div>
                <div class="search-item" style="float:right; margin:0;">
                    <el-button type="primary" @click="deleteList">批量删除</el-button>
                </div>
            </div>
            <div class="table-content">
                <el-table
                :data="tableData"
                border
                ref="multipleTable"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="100px">
                </el-table-column>
                <el-table-column prop="publicName" label="镜像名称">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        {{scope.row.status==true?'使用':'未使用'}}
                    </template>
                </el-table-column>
                <el-table-column prop="userNumber" label="公开状态">
                    <template slot-scope="scope">
                        {{scope.row.isShared==1?'公开':'未公开'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="lookManger(scope.row.id,scope.row.publicName,scope.row.userName,scope.row.introduction)">查看镜像信息</el-button>
                        <!-- <el-button type="text" size="small" v-if='scope.row.isShared' @click="openClose(scope.row.id,scope.row.isShared)">关闭镜像</el-button>
                        <el-button type="text" size="small" v-else-if='!scope.row.isShared' @click="open(scope.row.id)">公开镜像</el-button> -->
                        <el-button type="text" size="small"  @click="lookImage(scope.row.id)">查看镜像</el-button>
                    </template>
                </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
                <el-dialog class="add-virtual-dialog" title="镜像信息" :visible.sync="dialogFormVisible" width='500px'>
                    <span class="count" v-if="introduction != '' && introduction != null" style='word-wrap:break-word' >{{introduction}}</span>
                    <span v-else-if="introduction == '' ||  introduction == null " style='word-wrap:break-word'>暂无镜像信息</span>
                     <!-- <el-form :model="form"  label-width="100px">
                        <el-input  type="textarea"  :rows="3" v-model="form.introduction" v-if="form.introduction != ''"  ></el-input>
                    </el-form> -->
                     <div slot="footer" style="text-align:center;">
                        <el-button type="primary" @click="close" >关闭</el-button>
                    </div>
                </el-dialog>
                <el-dialog class="desktop-dialog log" :visible.sync="notesDialogVisibles">
                     <div class="desktop-close" @click="closeDialoge">×</div>
                     <iframe :src="url" width="100%" :height="iframeHeight" frameborder="0"></iframe>
                </el-dialog>
         </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                notesDialogVisibles: false,
                iframeHeight:'',
                url:'',
                id:'',
                imageValue:'',
                tableData: [],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                multipleSelection: [],
                dialogFormVisible: false,
                introduction:'',

                // 新增修改
                projectAccessUrl: '',
                virtualWebsock: null,
                virtualWebsockOver: null,

            }
        },
        created() {
            this.init()
            //获取虚机地址IP

            this.iframeHeight = $('body').height()
        },
        destroyed: function() {
            this.virtualWebsockOver()
        },
        methods: {
            init(){
                let self = this
                self.$http.get('/dataplatform/image/listImage?pageNum='+self.currentPage+'&pagesize='+self.pagesize+'&imageName='+self.imageValue).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                       self.tableData = res.data.list
                       self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //关闭信息
            close(){
               this.dialogFormVisible=false
            },
            //关闭弹窗地址
            closeDialoge(){
                let self = this
				// self.$http.get('/dataplatform/image/closeImage?imageId='+self.id).then(response => {
                //     let res = response.data
                //     if(res.code == '200'){
                //         self.notesDialogVisibles=false
                //     }else if(res.code == '401'){
                //         self.$router.replace({
                //             path:'/login'
                //         })
                //     }else{
                //         self.$message.error(res.message)
                //     }
                // })

                self.virtualWebsockOver()
                self.notesDialogVisibles = false
            },
            //查看镜像
            lookImage(id){
                let self = this
                self.virtualWebSocket(id)
                self.Loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
				self.$http.get('/dataplatform/image/openImage?imageId='+id).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.url=res.data.url
                        self.notesDialogVisibles=true
                        self.id=id
                        self.Loading.close()
                    }else if(res.code == '401'){
                        self.Loading.close()
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.Loading.close()
                        self.$message.error(res.message)
                    }
                })
            },
            // 新增修改
            virtualWebSocket(id){
                //用户ID
                this.projectAccessUrl = JSON.parse(window.localStorage.getItem('access-user')).projectAccessUrl
                let userId = JSON.parse(window.localStorage.getItem('access-user')).id
                const wsuri = "ws://"+this.projectAccessUrl+"/dataplatform/socket/user/"+userId+"/image/"+id
                this.virtualWebsock = new WebSocket(wsuri);
                this.virtualWebsock.onopen = this.virtualWebsockopen;
                this.virtualWebsock.onmessage = this.virtualWebsockmessage;
                this.virtualWebsockOver = () => {
                    this.virtualWebsock.close()
                }
            },
            virtualWebsockopen(){
                console.log('open sucess')
            },
            virtualWebsockmessage(e){ //数据接收
                console.log('open message')
            },
            //查看镜像信息
            lookManger(id,publicName,userName,introduction){
                this.dialogFormVisible=true
                this.id=id
                this.introduction=introduction
                console.log( this.introduction)

            },
            //关闭镜像
            // openClose(id){
            //     let self = this
            //     self.$confirm('是否关闭镜像?', '提示', {
			// 		confirmButtonText: '确定',
			// 		cancelButtonText: '取消',
			// 	}).then(() => {
			// 	self.$http.post('/dataplatform/image/cancelShareImage',{
            //        imageId:id
            //     }).then(response => {
            //         let res = response.data
            //         if(res.code == '200'){
            //             self.$message({
            //                 message: '关闭镜像成功',
            //                 type: 'success'
            //             })
            //             self.init()
            //         }else if(res.code == '401'){
            //             self.$router.replace({
            //                 path:'/login'
            //             })
            //         }else{
            //             self.$message.error(res.message)
            //         }
            //         },(err) => {
			// 			console.log('err');
            //         })
            //      }).catch(() => {
			//    })
            // },
            //公开镜像
            // open(id){
            //     let self = this
            //     self.$confirm('是否打开镜像?', '提示', {
			// 		confirmButtonText: '确定',
			// 		cancelButtonText: '取消',
			// 	}).then(() => {
			// 	self.$http.post('/dataplatform/image/shareImage',{
            //         imageId:id
            //     }
            //     ).then(response => {
            //         let res = response.data
            //         if(res.code == '200'){
            //             self.$message({
            //                 message: '公开镜像成功',
            //                 type: 'success'
            //             })
            //             self.init()

            //         }else if(res.code == '401'){
            //             self.$router.replace({
            //                 path:'/login'
            //             })
            //         }else{
            //             self.$message.error(res.message)
            //         } },(err) => {
			// 			console.log('err');
            //         })
            //      }).catch(() => {
            //     })
            // },
           //批量删除
           deleteList(){
             let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的镜像',
                        type: 'warning'
                    })
					return
                }
                // let idList = ''
				// for(let item in self.multipleSelection){
				// 	if(item == 0){
				// 		idList = self.multipleSelection[item]
				// 	}else{
				// 		idList = idList + '&' + 'idList='+self.multipleSelection[item]
                //     }
                // }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.get('/dataplatform/image/deleteImage?imageIds='+self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
							self.init()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.init()
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
           },
           //搜索
           searchFn(){
                this.currentPage = 1
                this.init()
           },
           //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
				this.multipleSelection = valArr
            },

        }
    }
</script>

<style scoped>
   .log>>>.el-dialog{
        margin-top: 0vh!important;
        width: 100% ;
        margin: 0 ;
    }
   .desktop-close{
        position: absolute;
        right: 10px;
        top: 13px;
        font-size: 50px;
        cursor: pointer;
        z-index: 100;
        color: #fff;
    }
    .count{
        line-height: 22px;
    }


</style>
